<template>
	<view class="uni-uploader-body">
		<view class="uni-uploader__files">
			<!-- 图片 -->
			<view class="dis-flex flex-wrap">
				<block v-for="(image,index) in imageList" :key="index">
					<view class="uni-uploader__file">
						<u-icon name="close-circle-fill" class='icon-cuo' size="28" @tap="delect(index)"></u-icon>
						<image class="uni-uploader__img" mode='aspectFit' :src="image.address" :data-index="index" @tap="previewImage"></image>
					</view>
				</block>
			</view>
			<!-- 视频 -->
			<view class="uni-uploader__file" v-if="src.address">
				<view class="uploader_video">
					<u-icon name="close-circle-fill" class='icon-cuo' size="28" @tap="delectVideo"></u-icon>
					<video :src="src.address" class="video" :poster="imageList[0]?imageList[0].address:''"></video>
				</view>
			</view>
			<view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
				<view class="uni-uploader__input" @tap="chooseVideoImage">选择</view>
			</view>
		</view>
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages"></HMmessages>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	import HMmessages from "@/components/HM-messages/HM-messages.vue"
	import {
		config
	} from '@/utils/global.js'
	export default {
		components: {
			HMmessages
		},
		data() {
			return {
				imageList: [], //图片
				src: {}, //视频存放
				sourceTypeIndex: 2,
				checkedValue: true,
				checkedIndex: 0,
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				cameraIndex: 0,
				VideoOfImagesShow: true,
				config: config,
				imagesUrlPath: []
			}
		},
		onUnload() {
			this.src = {},
				this.sourceTypeIndex = 2,
				this.sourceType = ['拍摄', '相册', '拍摄或相册'];
		},
		methods: {
			init(data) {

				this.imageList = [];
				this.imagesUrlPath = [];
				if (data) {
					data.forEach(element => {
						this.imagesUrlPath.push(element.fileId);
						if (element.fileType == 0) {
							element.address = element.url;
							this.imageList.push(element);

						} else {
							element.address = element.url;
							this.src = element;
						}
					})

				} else {
					this.imagesUrlPath = [];
					this.imageList = [];
					this.src = '';
				}
				this.$emit('addFileNames', this.imagesUrlPath)
			},
			chooseVideoImage() {
				uni.showActionSheet({
					title: "选择上传类型",
					itemList: ['图片', '视频'],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.chooseImages()
						} else {
							this.chooseVideo()
						}
					}
				})
			},
			chooseImages() {
				// 上传图片

				uni.chooseImage({
					count: 9, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.HMmessages.show('上传中', {
							icon: 'none',
							duration: 0,
							background: '#fdf6ec',
							fontColor: '#fcbd71'
						});
						let num = 0;
						let igmFile = res.tempFilePaths;
						igmFile.forEach(ele => {
							uni.uploadFile({
								url: this.config.uploadUrl,
								method: "POST",
								header: {
									'token': localStorage.getItem('token'),
								},
								fileType: 'image',
								filePath: ele,
								name: 'file',
								timeout: '180000',
								formData: {
									fileType: 'image',
								},
								success: (res) => {

									num++;
									// let imgUrls = JSON.parse(res.data); //微信和头条支持
									let imgUrls = JSON.parse(res.data); //百度支持
									if (imgUrls.address) {
										this.imagesUrlPath = this.imagesUrlPath.concat(imgUrls.fileId);
										this.imageList = this.imageList.concat(imgUrls); //微信
										if (this.imageList.length >= 9) {
											this.VideoOfImagesShow = false;
										} else {
											this.VideoOfImagesShow = true;
										}
									}
									if (num == igmFile.length) {
										this.HMmessages.close();
									}
									if (imgUrls.code == 401) {
										this.$refs.uToast.show({
											title: imgUrls.msg,
											type: 'error',
										})
									}
									this.$emit('addFileNames', this.imagesUrlPath)
								},
								fail: (res) => {
									this.HMmessages.close();
									this.$refs.uToast.show({
										title: "上传失败",
										type: 'error',
									})
								}
							})
						})
						// this.imageList = this.imageList.concat(res.tempFilePaths)  //头条
					},

				});
			},
			chooseVideo() {
				// 上传视频

				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					camera: this.cameraList[this.cameraIndex].value,
					sourceType: ['album'],
					success: (responent) => {
						this.HMmessages.show('上传中', {
							icon: 'none',
							duration: 0,
							background: '#fdf6ec',
							fontColor: '#fcbd71'
						});
						let videoFile = responent.tempFilePath;
						if(responent.size > 104857600){
							this.$refs.uToast.show({
								title: "视频大于100M",
								type: 'error',
							})
							return false
						}
						uni.uploadFile({
							url: this.config.uploadUrl,
							method: "POST",
							header: {
								'token': localStorage.getItem('token'),
							},
							fileType: 'video',
							formData: {
								fileType: 'video',
							},
							filePath: videoFile,
							name: 'file',
							success: (res) => {
								// let videoUrls = JSON.parse(res.data) //微信和头条支持
								let videoUrls = JSON.parse(res.data); //百度支持
								let index = this.imagesUrlPath.findIndex(fruit => fruit == this.src.fileId ? this.src.fileId : '') // 0
								if (index != -1) {
									this.imagesUrlPath.splice(index, 1);
								}
								this.imagesUrlPath = this.imagesUrlPath.concat(videoUrls.fileId);
								this.src = videoUrls; //微信
								if (this.src) {
									this.itemList = ['图片']
								} else {
									this.itemList = ['图片', '视频']
								}
								this.HMmessages.close();
								this.$emit('addFileNames', this.imagesUrlPath);
							},
							fail: (res) => {
								this.HMmessages.close();
								this.$refs.uToast.show({
									title: "上传失败",
									type: 'error',
								})
							}
						})
						// this.src = responent.tempFilePath;  //头条
					}
				})
			},
			previewImage: function(e) {
				//预览图片
				let current = e.target.dataset.index;
				let imgUrl = [];
				this.imageList.forEach(ele => {
					imgUrl.push(ele.address)
				})
				uni.previewImage({
					current: current,
					urls: imgUrl
				})
			},
			delect(index) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							this.$u.api.deleteImg(this.imageList[index].fileId).then(res => {
								let i = this.imagesUrlPath.findIndex(fruit => fruit == this.imageList[index].fileId) // 0
								if (i != -1) {
									this.imagesUrlPath.splice(i, 1);
								}
								this.imageList.splice(index, 1);
							})


						}
					}
				})
			},
			delectVideo() {
				uni.showModal({
					title: "提示",
					content: "是否要删除此视频",
					success: (res) => {
						if (res.confirm) {
							this.$u.api.deleteImg(this.src.fileId).then(res => {
								let index = this.imagesUrlPath.findIndex(fruit => fruit == this.src.fileId) // 0
								if (index != -1) {
									this.imagesUrlPath.splice(index, 1);
								}
								this.src = '';
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.burst-wrap {
		width: 100%;
		height: 100%;
	}

	/* .burst-wrap .burst-wrap-bg{
    position: relative;
    width: 100%;
    height: 320upx;
    background:linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
    border-bottom-right-radius: 80upx;
    border-bottom-left-radius: 80upx;
} */
	.burst-wrap .burst-wrap-bg>view {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		position: absolute;
		top: 65upx;
		left: 0;
		right: 0;
	}

	.form-item {
		width: 100%;
	}

	.form-item textarea {
		display: block;
		height: 220upx;
		width: 100%;
		color: #AAAAAA;
		font-size: 28upx;
	}

	.uni-uploader__file,
	.uploader_video {
		position: relative;
		z-index: 1;
		width: 160upx;
		height: 160upx;
		margin-left: 10upx;
		margin-top: 10upx;
	}

	.uni-uploader__img {
		width: 160upx;
		height: 160upx;
	}

	.icon-cuo {
		position: absolute;
		right: 0;
		z-index: 999;
	}

	.video {
		width: 100%;
		height: 100%;
	}

	.login-input-box {
		position: relative;
		border-bottom: 1upx solid #EEEEEE;
	}

	.login-input-box .forget,
	.login-input-box .phone {
		position: absolute;
		top: 0;
		height: 100%;
		z-index: 100;
	}

	.login-input-box .phone {
		width: 100upx;
		left: 0;
		color: #666666;
		font-weight: bold;
	}

	.login-input-box .phone-input {
		padding-left: 100upx;
	}

	.address-wrap,
	.open-info {
		margin-top: 20upx;
	}

	.open-info>view:last-child {
		font-size: 28upx;
		color: #999999;
	}

	.address-wrap .address {
		background: #F2F2F2;
		border-radius: 40upx;
		padding: 0 20upx;
	}

	.user-set-btn {
		margin: 40upx;
		background: linear-gradient(90deg, rgba(251, 91, 80, 1) 0%, rgba(240, 45, 51, 1) 100%);
		color: #FFFFFF;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
	}
</style>
